<!-- 设备index -->
<template>
  <!-- <dv-full-screen-container class="index"> -->
  <dv-border-box-8 :reverse="true" :dur="15" :color="['#010c41']">
    <div class="bd animate__animated animate__zoomIn">
      <!-- left -->
      <div class="box left">
        <!-- 左上 -->

        <div class="box-container">
          <dv-border-box-12 :color="['rgba(50, 197, 233, .4)']">
            <!-- <CapsuleChart title="使用前五单位统计" ref="device" @click.native="toDeviceDetail($event)"></CapsuleChart> -->
            <PublicEcharts
              v-if="!loadingFlag"
              :option="this.useData1"
              :title="'设备使用类型统计'"
              :id="'useData1'"
              ref="useData1"
            ></PublicEcharts>
            <!-- loading -->
            <div v-if="loadingFlag" class="e-loading">
              <dv-loading style="color: #fff; opcity: 0.5"
                >数据加载中...</dv-loading
              >
            </div>
          </dv-border-box-12>
        </div>

        <!-- 左中 -->
        <div class="box-container">
          <dv-border-box-12 :color="['rgba(50, 197, 233, .4)']">
            <!--  -->
            <PublicEcharts
              v-if="!loadingFlag"
              :option="this.useData2"
              :title="'设备登记数量统计'"
              :id="'useData2'"
              ref="useData2"
            ></PublicEcharts>
            <!-- loading -->
            <div v-if="loadingFlag" class="e-loading">
              <dv-loading style="color: #fff; opcity: 0.5"
                >数据加载中...</dv-loading
              >
            </div>
          </dv-border-box-12>
        </div>
        <!-- 左下 -->
        <div class="box-container">
          <dv-border-box-12 :color="['rgba(50, 197, 233, .4)']">
            <!--  -->
            <PublicEcharts
              v-if="!loadingFlag"
              :option="this.useData3"
              :title="'隐患设备占比'"
              :id="'useData3'"
              ref="useData3"
            ></PublicEcharts>
            <!-- loading -->
            <div v-if="loadingFlag" class="e-loading">
              <dv-loading style="color: #fff; opcity: 0.5"
                >数据加载中...</dv-loading
              >
            </div>
          </dv-border-box-12>
        </div>
      </div>
      <!-- main -->
      <div class="box main">
        <div class="title">
          <dv-decoration-11
            class="h1"
            style="width: 50%; height: 60%; font-size: 0.3rem"
            >单位统计详情</dv-decoration-11
          >
          <router-link to="/">
            <dv-decoration-7 class="back">综合大屏</dv-decoration-7>
          </router-link>
        </div>
        <div class="device-total">
          <div class="total-info">
            <!-- <span>压力容器数量：</span> -->
            <dv-border-box-5 :reverse="true" class="total-bd">
              <div class="total-num">
                <dv-digital-flop
                  :config="totalConfig"
                  style="width: 50%; height: 40%"
                />
              </div>
              <div class="info-num">
                <div class="num-box">
                  <dv-digital-flop
                    :config="totalConfig1"
                    style="width: 100%; height: 40%"
                  />
                </div>
                <div class="num-box">
                  <dv-digital-flop
                    :config="totalConfig2"
                    style="width: 100%; height: 40%"
                  />
                </div>
                <div class="num-box">
                  <dv-digital-flop
                    :config="totalConfig3"
                    style="width: 100%; height: 40%; color: #f00"
                  />
                </div>
              </div>
            </dv-border-box-5>
          </div>
        </div>
        <div class="map">
          <!-- <Emap v-if="!loadingFlag"></Emap> -->
          <!-- <Epoint v-if="!loadingFlag"></Epoint> -->
          <BdMap></BdMap>
          <!-- loading -->
          <div v-if="loadingFlag" class="e-loading">
            <dv-loading style="color: #fff; opcity: 0.5"
              >数据加载中...</dv-loading
            >
          </div>
        </div>
        <div class="footer">
          <dv-decoration-4 :reverse="true" style="width: 100%; height: 100%" />
        </div>
      </div>
      <!-- right -->
      <div class="box right">
        <!-- 右上 -->
        <div class="box-container">
          <!--  -->
          <dv-border-box-12 :color="['rgba(50, 197, 233, .4)']">
            <!--  -->
            <PublicEcharts
              v-if="!loadingFlag"
              :option="this.useData4"
              :title="'作业人员年龄统计'"
              :id="'useData4'"
              ref="useData4"
            ></PublicEcharts>
            <!-- loading -->
            <div v-if="loadingFlag" class="e-loading">
              <dv-loading style="color: #fff; opcity: 0.5"
                >数据加载中...</dv-loading
              >
            </div>
          </dv-border-box-12>
        </div>
        <!-- 右中 -->
        <div class="box-container">
          <!--  -->
          <dv-border-box-12 :color="['rgba(50, 197, 233, .4)']">
            <!--  -->
            <PublicEcharts
              v-if="!loadingFlag"
              :option="this.useData5"
              :title="'作业人员持证占比'"
              :id="'useData5'"
              ref="useData5"
            ></PublicEcharts>
            <!-- loading -->
            <div v-if="loadingFlag" class="e-loading">
              <dv-loading style="color: #fff; opcity: 0.5"
                >数据加载中...</dv-loading
              >
            </div>
          </dv-border-box-12>
        </div>
        <!-- 右下 -->
        <div class="box-container">
          <!--  -->
          <dv-border-box-12 :color="['rgba(50, 197, 233, .4)']">
            <!--  -->
            <PublicEcharts
              v-if="!loadingFlag"
              :option="this.useData6"
              :title="'设备年度新增数量趋势'"
              :id="'useData6'"
              ref="useData6"
            ></PublicEcharts>
            <!-- loading -->
            <div v-if="loadingFlag" class="e-loading">
              <dv-loading style="color: #fff; opcity: 0.5"
                >数据加载中...</dv-loading
              >
            </div>
          </dv-border-box-12>
        </div>
      </div>
    </div>
  </dv-border-box-8>
  <!-- </dv-full-screen-container> -->
</template>

<script>
import PublicEcharts from "../components/charts/PublicEcharts"; // [id]必传
import BdMap from "../components/map/BdMap"
import {
  getUseType,
  getRegCount,
  getDangerProportion,
  getPersonAge,
  getLicensedPersion,
  getYearTrend,
} from "../utils/chartOption/unitCountOption"; // 图表参数

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    PublicEcharts,
    BdMap,
    // RingChart,
  },
  data() {
    //这里存放数据
    return {
      msg: this.$route.params.UnitType || "设备",
      useData1: null,
      useData2: null,
      useData3: null,
      useData4: null,
      useData5: null,
      useData6: null,
      //
      totalConfig: {
        number: [0],
        content: "设备总数：{nt}",
      },
      totalConfig1: {
        number: [0],
        content: "化工企业：：{nt}",
        style: {
          fontSize: 24,
          fill: "#32c5e9",
        },
      },
      totalConfig2: {
        number: [0],
        content: "危化企业：{nt}",
        style: {
          fontSize: 24,
          fill: "#67e0e3",
        },
      },
      totalConfig3: {
        number: [0],
        content: "重点单位：{nt}",
        style: {
          fontSize: 24,
          fill: "#ffdb5c",
        },
      },
      loadingFlag: true,
    };
  },
  props: {
    //
  },
  //监听属性 类似于data概念
  computed: {
    areaCode() {
      return this.$store.state.listAreaIndex;
    },
  },
  //监控data中的数据变化
  watch: {
    areaCode(newVal, oldVal) {
      console.log("区域code有改动 -- chart4: [" + newVal + "]");
      this.init();
    },
  },
  //方法集合
  methods: {
    initTotal(data) {
      console.log(data);
      // this.flag = false
      this.totalConfig = {
        number: [data.total],
        content: "使用单位数：{nt}",
      };
      // 1
      this.totalConfig1 = {
        number: [data.use_ischaemical],
        content: "化工企业：{nt}",
        style: {
          fontSize: 24,
          fill: "#32c5e9",
        },
      };
      // 2
      this.totalConfig2 = {
        number: [data.use_is_danage],
        content: "危化企业：{nt}",
        style: {
          fontSize: 24,
          fill: "#67e0e3",
        },
      };
      // 3
      this.totalConfig3 = {
        number: [data.is_major],
        content: "重点单位：{nt}",
        style: {
          fontSize: 24,
          fill: "#ffdb5c",
        },
      };
    },

    // 获取地图点
    async getDevMap() {
      let area_code =
        this.$store.getters.getAreaList[this.$store.getters.getListAreaIndex]
          .area_code || 320700000000;
      // console.log('散点地图');
      // console.log(area_code);

      // let arr = [];
      let ret = await this.$http.postGetDevMap({ area_code });
      ret = ret.data;
      if (ret.errorCode != 0) {
        return console.log("获取坐标点有误");
      }

      return ret.data.comMap;
    },

    async init() {
      this.loadingFlag = true
      let params = {
        area_code: this.$store.getters.getAreaList[
          this.$store.getters.getListAreaIndex
        ].area_code,
        // dev_code: this.$store.getters.getListPageType[
        //   this.$store.getters.getListTypeIndex
        // ].dev_code,
      };
      console.log("发送的参数");
      console.log(params);
      console.log("等待接口 getComChar");

      let arr = await this.$http["postGetComChar"](params);
      if (arr.data.errorCode != 0) {
        console.log(arr);
        return console.log("单位统计详情有错");
      }
      let data = arr.data.data;
      console.log(data);

      // 设备使用类型统计
      let arrs1 = { types: [], data: [] };
      data.devUseType.forEach((ele) => {
        arrs1.types.push(ele.dev_name);
        arrs1.data.push(ele.total);
      });

      // 设备登记数量统计
      let arrs2 = { types: [], data: [] };
      data.devRegYear.forEach((ele) => {
        arrs2.types.push(ele.dev_name);
        arrs2.data.push(ele.dev_num);
      });

      // 隐患设备占比
      let arrs3 = { types: [], data: [] };
      data.dangerDev.forEach((ele) => {
        // arrs3.types.push(ele.dev_name);
        arrs3.data.push({
          value: ele.danger_num,
          name: ele.dev_name
        });
      });

      // 作业人员年龄统计
      let arrs4 = { types: [], data: [] };
      data.staffAge.forEach((ele) => {
        arrs4.types.push(ele.sta);
        arrs4.data.push(ele.total);
      });

      // 持证占比
      let arrs5 = { types: [], data: [] };
      arrs5.types = ['证书过期','无证人员','持证人员']
      arrs5.data = [
        {value: data.staffCer != null ? data.staffCer.pass_cer_num : 0, name: '证书过期'},
        {value: data.staffCer != null ? data.staffCer.no_cer_num : 0, name: '无证人员'},
        {value: data.staffCer != null ? data.staffCer.has_cer_num : 0, name: '持证人员'}
      ]

      // 设备年度数量趋势
      let arrs6 = { types: [], data: [] };
      data.devYear.forEach((ele) => {
        arrs6.types.push(ele.year_num);
        arrs6.data.push(ele.total);
      });

      // ==== 中间 ====
      let totals = data.comInfo
      this.initTotal(totals)

      // -------------------------
      this.$nextTick(() => {
        this.useData1 = getUseType(arrs1),
        this.useData2 = getRegCount(arrs2),
        this.useData3 = getDangerProportion(arrs3),
        this.useData4 = getPersonAge(arrs4),
        this.useData5 = getLicensedPersion(arrs5),
        this.useData6 = getYearTrend(arrs6),
        this.loadingFlag = false;
      });

      // 地图的点
      let mapArr = await this.getDevMap()
      console.log(mapArr.length + '个使用单位坐标信息');
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.init();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.initTotal();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.box-container {
  width: 96%;
  flex: 1;
  padding: 2%;
  overflow: hidden;
  position: relative;
}
.bd {
  width: 100%;
  height: 100%;
  display: flex;
  .box {
    height: 100%;
    flex: 1;
  }
  .left,
  .right {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  // 中间
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      width: 100%;
      flex: 2;
      position: relative;
      .h1 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: @FontColor;
        font-size: 0.3rem;
      }
      .back {
        width: 20%;
        height: 20%;
        position: absolute;
        top: 10%;
        right: 0;
        // transform: translateY(-50%);
        color: #72b8fe;
        font-size: 0.2rem;
        padding: 0.1rem;
        // background-color: #ccc;
      }
    }
    .device-total {
      width: 100%;
      flex: 4;
      // background-color: #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      .total-info {
        width: 90%;
        height: 80%;
        .total-bd {
          width: 100%;
          height: 100%;
          padding: 0 2%;
          .total-num {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px solid rgb(51, 152, 219);
          }
          .info-num {
            width: 100%;
            height: 50%;
            // background-color: #f00;
            display: flex;
            .num-box {
              flex: 1;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
    .map {
      width: 100%;
      flex: 6;
      //   background-color: #fff;
    }
    .footer {
      width: 100%;
      flex: 0.5;
    }
  }
}
</style>